import { ElDialog, ElDrawer } from 'element-plus'
import { createApp, h, ref } from 'vue'




export function createPromiseDialog(component) {



  return function (dialogOption, componentOption) {
    return new Promise((resolve, reject) => {
      const visible = ref(true)

      const app = createApp({
        render() {
          let _type, _componentOption
          if (componentOption?.type) {
            let { type, ...asd } = componentOption
            _type = type
            _componentOption = asd
          } else {
            _componentOption = componentOption
          }

          if (_type === 'drawer') {
            // 返回一个ElDrawer组件
            return h(ElDrawer, {
              modelValue: visible.value,
              ...dialogOption,
              // 关闭方法
              beforeClose() {
                reject()
                visible.value = false

                setTimeout(() => {
                  app.unmount()
                  div.remove()
                }, 1000);
              }
            }, {
              default: () => {
                return h(component, {
                  ..._componentOption,
                  // 登录后关闭方法
                  onConfirm() {
                    visible.value = false
                    resolve()

                    setTimeout(() => {
                      app.unmount()
                      div.remove()
                    }, 500);
                  },
                  onClose() {
                    reject()
                    visible.value = false

                    setTimeout(() => {
                      app.unmount()
                      div.remove()
                    }, 1000);
                  }
                })
              }
            })
          } else {
            // 返回一个ELDialog组件
            return h(ElDialog, {
              modelValue: visible.value,
              ...dialogOption,
              // 关闭方法
              beforeClose() {
                reject()
                visible.value = false

                setTimeout(() => {
                  app.unmount()
                  div.remove()
                }, 1000);
              }
            }, {
              default: () => {
                return h(component, {
                  ..._componentOption,
                  isDialog: true,
                  // 登录后关闭方法
                  onConfirm() {
                    visible.value = false
                    resolve()

                    setTimeout(() => {
                      app.unmount()
                      div.remove()
                    }, 500);
                  },
                  onClose() {
                    reject()
                    visible.value = false

                    setTimeout(() => {
                      app.unmount()
                      div.remove()
                    }, 1000);
                  }
                })
              }
            })
          }
        }
      })

      // 创建根节点
      const div = document.createElement('div')
      // 根节点添加到body
      document.body.appendChild(div)
      // 挂载根节点
      app.mount(div)


    })
  }
}